const path = require('path');
const Plugin = require("html-webpack-plugin");
//导入vue-loader插件
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
    mode: "development",
    // mode: "production",
    entry: path.join(__dirname, './src/main.js'),
    output: {
        path: path.join(__dirname, './dist'),
        filename: 'main.js'
    },
    plugins: [new Plugin({
        template: path.join(__dirname, './src/index.html'),
        filename: 'index.html'
    }), new VueLoaderPlugin()],
    module: {
        rules: [{
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        }, {
            test: /\.less$/,
            use: ['style-loader', 'css-loader', 'less-loader']
        }, {
            test: /\.jpg|png|gif|bmp$/,
            // use: 'url-loader?limit=30987&name=[name].[ext]'
            use: 'url-loader?limit=30987&name=[hash:6]-[name].[ext]'
        }, {
            //添加转换js文件的loader,必须把node-modules目录设置为排除选项，这样在打包的时候会忽略modules目录下的所有JS文件，否则项目运行不起来
            test: /\.js$/,
            use: 'babel-loader',
            exclude: /node_modules/,
        }, {
            test: /\.vue$/,
            use: 'vue-loader'
        }, {
            test: /\.ttf|woff|woff2|eot|svg$/,
            use: 'url-loader'
        }]
    },
    // resolve: {
    //     // alias:别名
    //     //当main.js文件中执行 import Vue from 'vue'时，就加载指定的路径'vue/dist/vue.js'
    //     alias: {
    //         'vue$': 'vue/dist/vue.js'
    //     }
    // }
}